<template>
  <a-spin :spinning="!show">
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <!-- S-查找条件 -->
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row type="flex" :gutter="4">
          <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
            <a-form-item label="表格名称">
              <a-input v-model="form.tableName" placeholder="填写表格名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
            <a-form-item label="表格类型">
              <a-input v-model="form.tableType" placeholder="填写表格类型" />
            </a-form-item>
          </a-col>
          <a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
            <a-form-item label="状态">
              <a-select v-model="form.tableStatus" placeholder="选择状态">
                <a-select-option :value="item.value" v-for="(item,index) in statusList" :key="index">{{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :xs="24" :sm="6" :md="12" :lg="6" style="margin-top:6px;">
            <a-button type="primary" @click="fetchList()">查询</a-button>
            <a-button style="margin-left: 10px" @click="init()">重置</a-button>
            <a-button style="margin-left: 10px" @click="editOpen()">添加</a-button>
          </a-col>

        </a-row>
      </a-form>
      <!-- E-查找条件 -->
      <!-- S-表格 -->
      <a-table :columns="columns" :data-source="data" bordered :pagination="{total}" @change="tableChange">
        <!-- S-表格状态 -->
        <template slot="tableStatus" slot-scope="record">
          <span>{{record?.tableStatus == 0 ? '有效' : '无效'}}</span>
        </template>
        <!-- E-表格状态 -->
        <!-- S-操作 -->
        <template slot="action" slot-scope="record">
          <a-space>
            <a-button type="primary" ghost @click="editOpen(record)">编辑</a-button>
            <a-button danger @click="deleteTap(record?.userId)">删除</a-button>
            <a-button danger @click="drawerOpen(record)">详情</a-button>
          </a-space>
        </template>
        <!-- E-操作 -->
      </a-table>
      <!-- E-表格 -->
      <!-- S-编辑弹框 -->
      <edit-model ref="editRef" @ok="init" :orgList="orgList" :statusList="statusList" :questionList="questionList" />
      <!-- E-编辑弹框 -->
      <!-- S-抽屉 -->
      <drawer ref="drawerRef" :orgList="orgList" :statusList="statusList" />
      <!-- E-抽屉 -->
    </div>
  </a-spin>
</template>

<script>
  import { mapState } from 'vuex'
  import { message } from 'ant-design-vue';
  import editModel from "./components/edit"
  import drawer from "./components/drawer"
  import { postTableList, postTableDelete, getTableDetail } from "@/services"
  import { getOrgList } from "@/services"
  import { postQuestionAllList } from "@/services"
  export default {
    name: 'Table',
    components: {
      editModel,
      drawer,
    },
    data() {
      return {
        // 表单
        form: {
          limit: 10,
          page: 1,
          tableName: "",
          tableStatus: "",
          tableType: "",
        },
        // 表格数据
        data: [],
        // 总数
        total: 0,
        // 页面状态
        show: false,
        // 组织列表
        orgList: [],
        // 状态列表
        statusList: [
          { name: '选择状态', value: '' },
          { name: '有效', value: 0 },
          { name: '无效', value: 1 },
        ],
        // 表格结构
        columns: [
          {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
          },
          {
            title: '附件url',
            dataIndex: 'fileUrl',
            key: 'fileUrl',
          },
          {
            title: '更新日期',
            dataIndex: 'gmtModify',
            key: 'gmtModify',
          },
          {
            title: '更新者',
            dataIndex: 'modifyUser',
            key: 'modifyUser',
          },
          {
            title: '组织名称',
            dataIndex: 'orgNames',
            key: 'orgNames',
          },
          {
            title: '适用组织Id',
            dataIndex: 'orgIds',
            key: 'orgIds',
          },
          {
            title: '表格名称',
            dataIndex: 'tableName',
            key: 'tableName',
          },
          {
            title: '表格状态',
            dataIndex: 'tableStatus',
            key: 'tableStatus',
            scopedSlots: { customRender: 'tableStatus' },
          },
          {
            title: '表格描述',
            dataIndex: 'tableTitle',
            key: 'tableTitle',
          },
          {
            title: '表格类型',
            dataIndex: 'tableType',
            key: 'tableType',
          },
          {
            title: '操作',
            key: 'operation',
            scopedSlots: { customRender: 'action' },
          },
        ],
        // 全部问题列表 
        questionList: [],
      }
    },
    computed: {
      ...mapState('setting', ['pageMinHeight']),
    },
    async created() {
      // 组织列表
      await this.fetchOrgList()
      // 获取列表
      this.fetchList()
      // 获取全部问题列表
      this.fetchQuestionAllList()
    },
    methods: {
      /**
       * 打开抽屉 || 打开详情
       */
      async drawerOpen(e) {
        let data = e && await this.fetchData(e.id)
        this.$refs.drawerRef.open(data)
      },
      /**
       * 打开弹框
       */
      async editOpen(e) {
        let data = e && await this.fetchData(e.id)
        this.$refs.editRef.open(data)
      },
      /**
       * 删除 
       */
      deleteTap(id) {
        let t = this
        this.$confirm({
          title: '提示',
          content: '你确定要删除吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          async onOk() {
            t.show = false
            let res = await postTableDelete({
              tableId: id,
            })
            t.show = true
            if (res.code == 0) {
              message.success(res.msg)
              t.fetchList()
            } else {
              message.error(res.msg)

            }
          },
        });
      },
      /**
       *重置
       */
      init() {
        this.form = this.$options.data().form
        this.fetchList()
      },
      /**
       * 获取列表
       */
      async fetchList() {
        this.show = false
        let { code, data } = await postTableList(this.form)
        this.show = true
        if (code == 200) {
          this.data = data?.records
          this.total = data?.total
        }
      },
      /**
       * 获取组织列表 
       */
      async fetchOrgList() {
        let { code, data } = await getOrgList({})
        if (code == 200) {
          this.orgList = data
        }
      },
      /**
       * 表格回调
       */
      tableChange(e) {
        this.form.page = e.current
        this.form.limit = e.pageSize
        // 获取数据
        this.fetchList()
      },
      /**
       * 获取全部问题列表
       */
      async fetchQuestionAllList() {
        let { code, data } = await postQuestionAllList({
          dangerLevel: 0,
          limit: 0,
          orgId: 0,
          page: 0,
          questionStatus: 0,
          questionType: 0,
        })
        if (code == 200) {
          this.questionList = data
        }
      },
      /**
       * 获取详情数据
       */
      async fetchData(id) {
        this.load = false
        let { code, data, msg } = await getTableDetail({
          tableId: id
        })
        this.load = true
        if (code == 200) {
          return data
        } else {
          message.error(msg)
        }
      }
    },
  }
</script>

<style scoped lang="less">
</style>